<template>
  <div>
    <div>
      <mu-tabs class="waterBillList" :value.sync="num" inverse color="secondary" indicator-color="#f1f1f1" text-color="#2c3e50"  full-width>
        <mu-tab>水票管理</mu-tab>
      </mu-tabs>
      <div class="tabCon flex_center" >
        <div class="bodyContent">
          <!--列表搞个子组件-->
          <!--https://muse-ui.org/#/zh-CN/load-more  下拉刷新-->
          <div class="list" v-show="num == 0" >
            <mu-paper :z-depth="1" class="demo-loadmore-wrap">
              <mu-container ref="container" class="demo-loadmore-content" v-bind:style="{height:conH}">
                <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
                  <mu-list>
                    <template v-for="(tickt, a) in waterTicktList">
                      <div class="list_content">
                        <div class="content1" >
                          <div class="left content_flex">
                            <img :src="tickt.goods_img">
                            <div class="orl_left_right">
                              <h2 class="list_title">{{tickt.goods_name}}</h2>
                              <div class="category_water_bill">
                                <span v-for="(item, index) in tickt.waterbill_category">
                                  {{item.title}}
                                  <span v-if="(tickt.waterbill_category.length -1) > index">, </span>
                                </span>
                              </div>
                            </div>
                          </div>
                          <div class="right right_flex water_red_bac">
                            <p class="price">¥<span style="font-size: 2rem;font-weight: bold;">  {{tickt.goods_price | numFilter}}</span></p>
                            <p class="button_orl"  @click="openBotttomSheet(tickt)">立即购买</p>
                          </div>
                        </div>
                      </div>
                    </template>
                  </mu-list>
                </mu-load-more>
              </mu-container>
            </mu-paper>
          </div>
          <!--<div v-show="num ==1">
            <div class="des_content" v-html="describe"></div>
          </div>-->
        </div>
      </div>
      <mu-bottom-sheet :open.sync="open">
        <mu-list>

          <div class="choose-tickt flex" style="flex-direction: column;-webkit-flex-direction: column">
            <div class="flex">
              <div class="tickt_img">
                <img :src="choose_tickt.goods_img">
              </div>
              <div class="tickt_des_top">
                <h4 style="font-weight: bold">{{choose_tickt.goods_name}}</h4>
                <p>原价：<span class="big_num">{{choose_tickt.goods_price}}</span>元</p>
                <p>水票价：<span class="big_num des_col">{{meal_total_price}}</span>元/ <span class="big_num des_col">{{meal_total_num}}</span>桶, 省<span class="big_num des_col">{{meal_default_price}}</span>元</p>
                <p v-if="meal_descrite != ''">额外赠送: {{meal_descrite}}</p>
              </div>
            </div>
            <p style="font-size: 0.8rem;color: #9a9898;padding-left: 1rem">提示：水票购买后不退还</p>
          </div>
          <p style="padding: 0.5rem">水票套餐选择</p>
          <div class="meal_all">
            <div class="choose_cate" v-for="(cate, index) in choose_tickt.waterbill_category" @click="chooseTickt(choose_tickt,cate,index)">
              <mu-button class="meal" flat :class="{chooseActive:index == choose_index}">
                <span :class="{text_animate:cate.title.length > 10}">{{cate.title}}</span></mu-button>  <!---->
            </div>
          </div>
        </mu-list>
        <mu-button color="error" @click="sure_buy()" class="sure_button">确定购买</mu-button>
      </mu-bottom-sheet>
      <footer-app :type=2 v-on:type="type"></footer-app>
    </div>
  </div>
</template>

<script>

  import footerApp from './../public_components/foot'

  export default {
    data(){
      return{
        pageSize:50,
        tabs: ["购买水票"],
        num: 0,
        waterTicktList:[], //水票列表
        describe:'',  //水票须知
        totalpage:0,
        loading:true,
        page:1,
        refreshing: false,
        conH:'600px',
        has_more:false,
        open: false,
        choose_tickt:'',//表示当前准备购买的水票
        choose_index:0,
        meal_total_price:0,
        meal_total_num:0,
        meal_default_price:0,
        meal_descrite:'',
      }
    },
    mounted(){
      this.checkLogin();
      /*this.initDes();*/
      this.initList(1);
      this.$nextTick(function(){
        var allh = document.documentElement.clientHeight;
        var h1 = $('.mu-tabs').height();
        var h2 = $('.foot').height();
        var h = allh - h1 - h2;
        this.conH = h + 'px';
      })
    },
    methods: {
      tab(index) {
        this.num = index;
      },
      type: function (type) {
        this.type = type
      },

      initList(page){
        this.yesS.waterBillList(
          this.$combineParams({page:page})
        ).then(res => {
          this.loading = false
          var objs = res.data.goods_list;

          if(page == 1){
            this.has_more = false
            this.waterTicktList = objs.data;
          }else if(this.has_more == false){
            this.waterTicktList = this.waterTicktList.concat(objs.data);
          }
          this.page = page+1;
          if(objs.last_page <= objs.current_page || this.waterTicktList.length <= 0){
            this.loading = false;
            this.has_more = true;
          }
        })
      },

      refresh () {
        console.log('refresh')
        this.refreshing = true;
        this.$refs.container.scrollTop = 0;
        setTimeout(() => {
          this.refreshing = false;
          this.initList(1);
        }, 2000)
      },
      load () {

        this.loading = true;
        this.initList(this.page);
        setTimeout(() => {
          this.loading = false;
        }, 2000)

      },
      closeBottomSheet () {
        this.open = false;
        this.deleteCache('chooseTickt');
      },
      sure_buy (){
        //跳转到水票订单详情页
        this.$router.push({path:'/qds/waterBillOrder'});

      },
      openBotttomSheet (obj) {
        this.choose_tickt = obj;
        this.choose_index = 0;
        this.open = true;
        this.meal_descrite = obj.waterbill_category[0].description;
        this.meal_total_price = obj.waterbill_category[0].buy_num * obj.goods_price;
        this.meal_total_num = obj.waterbill_category[0].total_num;
        this.meal_default_price = obj.waterbill_category[0].gift_num * obj.goods_price;
        this.meal_descrite = obj.waterbill_category[0].description
        this.choose_tickt.chooseNum = 0;
        this.setCache('chooseTickt',this.choose_tickt)
      },
      chooseTickt(tickt,type,index){
        this.choose_index = index;
        this.meal_total_price = type.buy_num * tickt.goods_price;
        this.meal_total_num = type.total_num;
        this.meal_default_price = type.gift_num * tickt.goods_price;
        this.meal_descrite = type.description

        tickt.chooseNum = index;
        //将已选择内容放入缓存
        this.setCache('chooseTickt',tickt)
      }

    },
    filters: {
      numFilter(value) {
        // 截取当前数据到小数点后两位
        let realVal = Number(value).toFixed(0)
        // num.toFixed(2)获取的是字符串
        return Number(realVal)
      }
    },
    components:{
      footerApp,
    }
  }
</script>

<style lang="less">
  @import '../water_bill/css/listCss.css';
  .demo-loadmore-wrap {
    width: 100%;
    max-width: 700px;
    /* height: 420px;*/
    display: flex;
    flex-direction: column;
    .mu-appbar {
      width: 100%;
    }
  }
  .demo-loadmore-content {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mu-tab-link-highlight{
    background-color: #1296db;
  }
  .mu-secondary-text-color{
    color: #2c3e50;
  }
  .chooseActive{
    background: linear-gradient(to right, #fd6e5c , #ef1336)!important;
    background: -webkit-gradient(linear, left top, right top, from(#fd6e5c) , to(#ef1336))!important;
    color: #fff!important;
  }
  .category_water_bill{
    /*padding: 0 0.5rem;*/
    font-size: 0.8rem;
    color: gray;
  }

  .water_red_bac{
    background: #fde6e9!important;
  }

  .waterBillList .mu-tab-wrapper{
    font-size: 1rem;

  }
</style>
